<template>
  <div ref="codeEditorRef" id="code-editor" style="min-height: 400px"></div>
  <!--  <Editor :value="value" :plugins="plugins" @change="handleChange" />-->

  <a-button @click="fillValue">btn</a-button>
</template>

<script setup lang="ts">
import * as monaco from "monaco-editor";
import { onMounted, ref, toRaw, defineProps, withDefaults } from "vue";

const codeEditorRef = ref(null);

const value = ref("hello ");
const language = ref("java");

const codeEditor = ref();

onMounted(() => {
  codeEditor.value = monaco.editor.create(codeEditorRef.value, {
    value: value.value,
    language: "java",
    automaticLayout: true,

    minimap: {
      enabled: true,
    },
    readOnly: false,
    theme: "vs-dark",
  });

  codeEditor.value.onDidChangeModelContent(() => {
    console.log("内容未" + toRaw(codeEditor.value).getValue());
  });
});

const fillValue = () => {
  toRaw(codeEditor.value).setValue("1231");
};

// import gfm from "@bytemd/plugin-gfm";
// import highlight from "@bytemd/plugin-highlight";
// import { Editor, Viewer } from "@bytemd/vue-next";
// import { ref } from "vue";
//
// const plugins = [
//   gfm(),
//   highlight(),
//   // Add more plugins here
// ];
//
// const value = ref("");
//
// const handleChange = (val: string) => {
//   value.value = val;
// };
</script>
